Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

[FE] feature: 전역 스타일에 커스텀 스크롤바 스타일 적용 #318

Merged
merged 3 commits into from
Aug 12, 2024

Conversation

ImxYJL
Copy link
Contributor

@ImxYJL ImxYJL commented Aug 12, 2024


🚀 어떤 기능을 구현했나요 ?

  • 스크롤바 스타일을 커스텀했습니다.
  • 스크롤바 스타일을 전역 스타일에 적용했습니다.
    image

🔥 어떻게 해결했나요 ?

  • ::-webkit-scrollbar는 전역 선택자라서 별도의 태그(body, html 등) 안에 넣을 필요가 없었습니다.
    • 오히려 html이나 body 안에 넣으면 브라우저의 기본 스타일이 우선이 되어 커스텀 스크롤이 나타나지 않을 수 있습니다.
  • 스크롤바 자체에 달리 margin이나 padding을 줄 수는 없지만, 스크롤 대상인 요소에 margin-right를 줘서 스크롤바와 요소 사이에 gap을 줄 수 있습니다. (를 알아낸 쑤쑤 굿~)
export const Contents = styled.div`
  padding-right: 1.2rem;

  overflow-y: auto;
`;

📝 어떤 부분에 집중해서 리뷰해야 할까요?

  • 과연 모달이 아닌 일반 페이지에서도 잘 적용되는지 확인해주세요

📚 참고 자료, 할 말

  • 전역에 스크롤바 스타일을 적용해두긴 했는데 스크롤바를 사용하고 싶으면 해당 컴포넌트 안에서 overflow-y:autoscroll을 줘야 합니다. (위 코드에서도 content 안에 overflow-y가 적용되어 있음)
  • 왜 안 됐다가 됐는지 모르겠다...

Copy link
Contributor

@BadaHertz52 BadaHertz52 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

고생했어요

Copy link
Contributor

@soosoo22 soosoo22 left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

멋진 스크롤바네요!! 고생했어요! 올리!

Copy link
Contributor

@chysis chysis left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

스크롤바 고생했어요!

@ImxYJL ImxYJL merged commit 76d8fae into develop Aug 12, 2024
4 checks passed
@donghoony donghoony deleted the fe/feature/312-global-scrollbar-style branch August 20, 2024 01:24
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

[FE] 스크롤바 커스텀 디자인을 전역 스타일에 적용한다.
4 participants